<script setup name="ConProcessView">
import {useRoute} from "vue-router"
import ContractView from "@/views/contract/common/basicInfo/contractView.vue";
import {getButtons, getConProcessBasicInfo} from "@/api/contract/processContract.js";
import AuditView from "@/views/contract/process/processing/flowInfo/audit/auditView.vue";
import SignView from "@/views/contract/process/processing/flowInfo/sign/signView.vue";
import ArchiveView from "@/views/contract/process/processing/flowInfo/archiving/archivingView.vue";
import {getContractOperateMenu} from "@/utils/menu.js";
import FulfillView from "@/views/contract/process/processing/flowInfo/fulfill/fulfillView.vue";
import FlowInfoView from "@/views/contract/process/processed/flowInfo/flowInfoView.vue";
import {getTagType} from "@/utils/contract.js";
import Steps from "@/views/common/steps.vue";
import {getConProcessAttachmentFile, getConProcessAttachmentPageList} from "@/api/contract/attachment.js";
import AttachmentList from "@/views/common/attachment/attachmentList.vue";
import {
  getConProcessHistoryAllList, getConProcessHistoryFile,
} from "@/api/contract/history.js";
import HistoryList from "@/views/contract/common/history/historyList.vue";
import {addConProcessActivityNote, getConProcessActivityNoteAllList} from "@/api/contract/activityNote.js";
import {tabFunctions} from "@/utils/tab.js";

const {proxy} = getCurrentInstance()
const {conStatus} = proxy.useDict(["conStatus", false])
const activeTabName = ref('activityNote')
const route = useRoute()
const conId = route.params && route.params.conId
const listStatus = route.query && route.query.status
const contractInfo = ref({})
const opMenuEnum = getContractOperateMenu()
provide('currentMenu', opMenuEnum.process)
provide('getActivityNoteList', getConProcessActivityNoteAllList)
provide('addActivityNote', addConProcessActivityNote)
const data = reactive({
  flowInfoButtons: {
    isAudit: false,
    isSign: false,
    isArchive: false,
    isBack: false,
    isCompareClick: false,
    isFulfill: false
  },
  attachmentOpInfo: {
    listQueryParams: {
      conId: conId
    },
    backListUrl: '/contract/' + opMenuEnum.process,
    openUrl: '/contract/attachment/openFile/',
    getFileApi: getConProcessAttachmentFile,
    getListApi: getConProcessAttachmentPageList
  },
  isRefreshAttachment: false,
  historyOpInfo: {
    listQueryParams: conId,
    backListUrl: '/contract/' + opMenuEnum.process,
    getFileApi: getConProcessHistoryFile,
    openUrl: '/contract/history/openFile/',
    getListApi: getConProcessHistoryAllList
  },
  isRefreshHistory: false,
  isRefreshActivityNote: false,
})
const {flowInfoButtons, attachmentOpInfo, isRefreshAttachment, historyOpInfo, isRefreshHistory, isRefreshActivityNote} = toRefs(data)
const {handChangeTab} = tabFunctions(activeTabName)

onMounted(() => {
  loadMainViewData()
})

function loadMainViewData() {
  if (conId) {
    getConBasicInfo()
    getButtonsInfo()
  }
}

function getConBasicInfo() {
  getConProcessBasicInfo(conId).then(res => {
    contractInfo.value = res
  })
}

function getButtonsInfo() {
  getButtons(conId).then(res => {
    flowInfoButtons.value = res
  })
}

const handClickTab = (tab) => {
  //实时刷新页面数据
  loadMainViewData()
  if ('activityNote' === tab.props.name) {
    isRefreshActivityNote.value = true
  } else if ('attachment' === tab.props.name) {
    isRefreshAttachment.value = true
  } else if ('history' === tab.props.name) {
    isRefreshHistory.value = true
  }
  setTimeout(() => {
    setRefreshData()
  },50)
}

const setRefreshData = () => {
  isRefreshActivityNote.value = false
  isRefreshAttachment.value = false
  isRefreshHistory.value = false
}

</script>

<template>
  <div class="app-container">
    <el-card :span="24" class="mb10">
      <Steps :status="contractInfo.status" :statusSteps="conStatus.filter(item => item.value !== '已废弃')"/>
    </el-card>
    <el-card :span="24">
      <template #header>
        <el-row style="line-height: 40px">
          <el-text type="primary" style="font-size: 18px;">{{contractInfo.name}}</el-text>
          <el-text class="ml10">
            <el-tag :type="getTagType(contractInfo.status)" effect="plain">状态：{{contractInfo.status}}</el-tag>
            <el-tag :type="getTagType(contractInfo.status)" effect="plain" class="ml10">固定格式：{{contractInfo.isFixedFormat}}</el-tag>
            <el-tag :type="getTagType(contractInfo.status)" effect="plain" class="ml10">起草人：{{contractInfo.userName}}</el-tag>
            <el-tag type="info" effect="plain" class="ml10">新建时间：{{contractInfo.createTime}}</el-tag>
            <el-tag type="info" effect="plain" class="ml10" v-if="contractInfo.updateTime!==null">更新时间：{{contractInfo.updateTime}}</el-tag>
          </el-text>
        </el-row>
      </template>
      <el-row>
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <el-tabs v-model="activeTabName" @tab-change="handChangeTab" @tab-click="handClickTab">
            <el-tab-pane label="流程信息" name="activityNote" lazy>
              <FlowInfoView :conId="contractInfo.id" :isRefreshActivityNote="isRefreshActivityNote"
                            v-if="listStatus==='已办'"/>
              <AuditView :conId="contractInfo.id" :flowInfoButtons="flowInfoButtons" :isRefreshActivityNote="isRefreshActivityNote"
                         v-else-if="contractInfo.status==='审核中'"/>
              <SignView :conId="contractInfo.id" :flowInfoButtons="flowInfoButtons" :isRefreshActivityNote="isRefreshActivityNote"
                        v-else-if="contractInfo.status==='签订中'"/>
              <FulfillView :conId="contractInfo.id" :flowInfoButtons="flowInfoButtons" :isRefreshActivityNote="isRefreshActivityNote"
                           v-else-if="contractInfo.status==='履行中'"/>
              <ArchiveView :conId="contractInfo.id" :flowInfoButtons="flowInfoButtons" :isRefreshActivityNote="isRefreshActivityNote"
                           v-else-if="contractInfo.status==='归档中'"/>
            </el-tab-pane>
            <el-tab-pane label="基本信息" name="contractBasicInfo" lazy>
              <ContractView :contractInfo="contractInfo"/>
            </el-tab-pane>
            <el-tab-pane label="合同附件" name="attachment" lazy>
              <AttachmentList :attachmentOpInfo="attachmentOpInfo" :isRefreshAttachment="isRefreshAttachment"/>
            </el-tab-pane>
            <el-tab-pane label="历史版本" name="history" lazy>
              <HistoryList :historyOpInfo="historyOpInfo" :isRefreshHistory="isRefreshHistory"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-row>
    </el-card>
  </div>
</template>
